<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import type { Doctor } from '@/types/doctor'
import { VerifyStatus } from '@/types/enum'
import { getDoctors } from '@/services/doctor'
import { useMemberStore } from '@/stores'

const memberStore = useMemberStore()

const segmentItems = ref(['所有', '未提交', '待审核', '已通过', '未通过'])
const current = ref(0)
const dataList = ref<Required<Doctor>[]>([])

const activeTabIndex = ref(-1)

const dataTabList = computed<Required<Doctor>[]>(() => {
  if (activeTabIndex.value === -1) {
    return dataList.value
  }
  return dataList.value.filter(doctor => doctor.verifyStatus === activeTabIndex.value)
})

onShow(() => {
  list()
})

async function list() {
  dataList.value = await getDoctors()
  console.log('列表数据：' ,dataTabList.value)
}

function onClickItem(e: UniHelper.UniSegmentedControlOnClickItemEvent) {
  activeTabIndex.value = e.currentIndex - 1
}


function handleItemClick(doctor: Required<Doctor>) {
  if (doctor.verifyStatus === VerifyStatus.verifying) {
    uni.navigateTo({
      url: './verify?id=' + doctor.id,
    })
  }
}
</script>

<template>
  <view class="container">
    <uni-segmented-control :values="segmentItems" :current="current"
                           @clickItem="onClickItem"
                           styleType="text"
                           activeColor="#0055ff"
    />
    <view class="data-list">
      <view v-for="data in dataTabList" :key="data.id" @click="handleItemClick(data)">
        <view class="data-item">
          <!-- 左侧信息区域 -->
          <view class="data-item-left">
            <view style="font-size: 18px; margin-bottom: 5px; font-weight: bold;">{{ data.name }}</view>
            <view>生成的邀请码：{{ data.myInviteCode }}</view>
          </view>
          <!-- 右侧状态区域 -->
          <view class="data-item-right">
            <view class="" v-if="data.verifyStatus === VerifyStatus.notCommit">
              <view>未提交审核资料</view>
            </view>
            <view class="" v-if="data.verifyStatus === VerifyStatus.verifying">
              <view>待审核</view>
            </view>
            <view v-if="data.verifyStatus === VerifyStatus.passed">
              已通过审核
            </view>
            <view v-if="data.verifyStatus === VerifyStatus.notPassed">
              未通过审核
            </view>

            <!--<view class="" v-if="data.verifyStatus === 1">-->
            <!--  <button size="mini" type="primary" @click.stop="goVerify(data._id)">去审核</button>-->
            <!--</view>-->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.data-item {
  background-color: #FFFFFF;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  padding: 10px 10px;
  // border-bottom: 1px solid #f0f0f0;

  .data-item-left {
    margin-right: 15px;
  }

  .data-item-right {
    color: $redColor;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    button {
      padding: 0 5px !important;
      margin: 0px;
    }
  }
}
</style>
